<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dictUpdateId ? '编辑字典项' : '新增字典项'"
    width="700px"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="onCancel"
    align-centerwidth="800px"
    @close="onCancel"
  >
    <template #default>
      <el-form
        ref="dialogRef"
        :model="dictForm"
        :rules="formRules"
        label-width="100px"
        class="user-editor-form"
      >
        <el-form-item label="字典键名" prop="k" class="inline">
          <el-input v-model="dictForm.k" show-word-limit placeholder="请输入字典键名" />
        </el-form-item>

        <!-- <el-form-item v-if="!dictForm.id" label="密码" prop="password" class="inline">
          <el-input
            v-model="dictForm.password"
            type="password"
            show-word-limit
            placeholder="请输入用户密码"
          />
        </el-form-item> -->

        <el-form-item label="字典键值" prop="v" class="inline">
          <el-input v-model="dictForm.v" placeholder="请输入字典键值" />
        </el-form-item>
        <el-form-item label="排序" prop="sort" class="inline">
          <el-input-number
            :precision="0"
            :min="1"
            :max="999"
            v-model="dictForm.sort"
            placeholder="请输入字典排序"
          />
        </el-form-item>
        <el-form-item label="字典类型" prop="typeId" class="inline">
          <el-select v-model="dictForm.typeId" placeholder="请选择字典类型" clearable>
            <el-option
              v-for="item in dictTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="remarks" class="inline">
          <el-input
            type="textarea"
            v-model="dictForm.remarks"
            placeholder="请输入字典键值"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
//系统配置
import { ref, reactive, onBeforeMount, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

// 接口
import { dictAdd, dictUpdate, dictGet } from '@api/dict_item'
import { IDictFormInfo } from '@interface/dict_item'
import { IDictTypeAll } from '@interface/dict'
import { dictTypeAll } from '@api/dicts'
//业务模型
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dictUpdateId: {
    type: String,
    default: ''
  }
})

const state = reactive({
  dictForm: <IDictFormInfo>{
    typeId: '',
    k: '',
    v: '',
    remarks: '',
    sort: 0
  },
  dictTypeList: [] as IDictTypeAll[]
})

const { dictForm, dictTypeList } = toRefs(state)

const dialogVisible = ref(props.dialogVisible)
const dictUpdateId = ref(props.dictUpdateId)

onBeforeMount(async () => {
  await getdictTypeAll()
  if (dictUpdateId.value != '') {
    dictGetInfo()
  }
})

const getdictTypeAll = async () => {
  const res = await dictTypeAll()
  dictTypeList.value = res.data
}

//详情
const dictGetInfo = async () => {
  const res = await dictGet(dictUpdateId.value)
  Object.assign(dictForm.value, res.data)
}

const onSubmit = async () => {
  if (dictUpdateId.value != '') {
    await dictUpdateHandle()
  } else {
    await dictAddHandle()
  }
  emit('dictChange')
  onCancel()
}

const dictAddHandle = async () => {
  const res = await dictAdd(dictForm.value)
  if (res.code != '200') {
    ElMessage({
      type: 'error',
      message: res.message
    })
    return
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }
}

const dictUpdateHandle = async () => {
  const res = await dictUpdate(dictForm.value)
  if (res.code != '200') {
    ElMessage({
      type: 'error',
      message: res.message
    })
    return
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }
}

//关闭弹窗
// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits()
const onCancel = async () => {
  emit('update:dialogVisible', false)
}
//api
</script>
